<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>云+-首页</title>
    <link rel="stylesheet" th:href="@{/front/lib/amazeui/assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{/front/css/hp.css}"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/front/lib/sliderPro/slider-pro.min.css}"/>
    <script th:src="@{/front/lib/amazeui/assets/js/jquery.min.js}"></script>
    <script th:src="@{/front/lib/layer/layer.js}"></script>
    <script th:src="@{/front/lib/amazeui/assets/js/amazeui.js}"></script>
    <script th:src="@{/front/lib/amazeui/pagination/amazeui-pagination.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin ">
    <div class="layui-header">
        <div class="layui-logo">云租房</div>
        <ul class="layui-nav layui-layout-left ">
            <li class="layui-nav-item"><a th:href="@{/front/head}">首页</a></li>
            <li class="layui-nav-item layui-this"><a href="">房源详情</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">关于我们</a>
                <dl class="layui-nav-child">
                    <dd><a href="">肖初俊</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-username"></i>
                </a>
                <dl class="layui-nav-child">
                    <!--<dd><a th:href="@{/front/one(id=${session.user.uid})}">修改密码</a></dd>-->
                </dl>
            </li>
            <li class="layui-nav-item  ">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-logout"></i>
                </a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/front/exit}">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

<div class="hp-detail-body am-container" style="">
    <div class="am-u-sm-12">
        <div class="am-u-sm-10" style="margin-left: -163px;">
            <!-- 房屋标题-区域 -->
            <div class="hp-detail-mark-area">
                <div class="am-g">
                    <span class="hp-detail-title" th:text="${one.title}"></span>
                </div>
                <div class="am-g hp-detail-title-address">
                    <span>[[${one.address}]]</span>
                    <span id="address"></span>
                </div>
            </div>
            <!--详情图轮播图-->
            <div class="hp-detail-imgs-area">
                <div id="slider-pro" class="slider-pro">
                    <div class="sp-slides">
                        <div class="sp-slide" th:each="img,array:${#strings.arraySplit(one.images,',')}">
                            <img class="sp-image" th:src="${#httpServletRequest.getContextPath()}+'/'+${img}"/>
                        </div>
                    </div>
                    <div class="sp-thumbnails">
                        <th:block th:each="img,array:${#strings.arraySplit(one.images,',')}">
                            <img class="sp-thumbnail" th:src="${#httpServletRequest.getContextPath()}+'/'+${img}"/>
                        </th:block>
                    </div>
                </div>
            </div>
            <!-- 房屋信息介绍-区域 -->
            <div class="hp-detail-info-area">
                <div class="am-cf hp-info-box">
                    <div class="am-fl" style="width: 122px;">
                        <div class="box-title"><i class="hp-icon-fwsm"></i>
                            <p>房屋说明</p>
                        </div>
                    </div>
                    <div class="am-fl">
                        <div class="hp-box-content" style="width: 600px" ;>
                            <span th:text="${one.explain}"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hp-detail-info-area">
                <div class="am-cf hp-info-box" ;>
                    <div class="am-fl">
                        <div class="box-title"><i class="hp-icon-ptss"></i>
                            <p>配套设施</p>
                        </div>
                    </div>
                    <div class="am-fl">
                        <div class="hp-box-content" style="width: 600px; " ;>
                            <span th:text="${one.facilities}"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hp-detail-info-area">
                <div class="am-cf hp-info-box">
                    <div class="am-fl">
                        <div class="box-title"><i class="hp-icon-jtqk"></i>
                            <p>交通情况</p>
                        </div>
                    </div>
                    <div class="am-fl">
                        <div class="hp-box-content" style="width: 600px" ;>
                            <span th:text="${one.trafficInfo}"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="am-g">
                <div id="allmap" style="width: 737px;height: 500px;margin-top: 10px;"></div>
            </div>

            <div class="hp-comment-area">

                <div class="am-g hp-comment-area-top">
                    <div class="hp-comment-area-top-mark">评论</div>
                </div>

                <div class="am-g hp-comment-item" th:each="comment:${commentList}">
                    <div class="am-u-sm-2">
                        <img width="80px" height="80px" th:src="@{/front/img/person_head.jpg}"
                             class="am-circle"/>
                        <span class="hp-comment-name">隐无为</span>
                    </div>
                    <div class="am-u-sm-10">
                        <div>
                            <span class="hp-comment-time">[[${comment.createTime}]]</span><br/>
                            <span>[[${comment.content}]]</span>
                        </div>
                    </div>
                </div>

                <div class="am-g hp-comment-item" id="comment">
                    <textarea placeholder="填写评论" class="" style="width: 600px;" rows="5" id="doc-ta-1"></textarea>
                    <a id="issue" class="am-btn am-btn-danger" style="margin-top: 50px;margin-left: 20px;">发表</a>
                </div>

            </div>

        </div>
        <div class="am-u-sm-2 hp-detail-price-area">
            <div class="hp-detail-price">
                <div class="am-g">
                    <span class="price-span">¥666/晚 </span>
                </div>
                <div class="am-g">
                    <div class="hp-price-btn">
                        <button type="button" class="am-btn am-btn-danger am-btn-block">立即预订</button>
                    </div>
                </div>
                <div class="am-g">
                    <div class="">
                        <div class=" hp-img-person">
                            <img width="200px" height="200px" th:src="@{/front/img/headimg.jpg}"/>
                        </div>
                        <div class="hp-name">
                            <p class="name">隐无为</p>
                        </div>
                    </div>
                </div>
                <div class="am-g hp-im-chat">
                    <a>在线聊天</a>
                </div>
            </div>
        </div>

    </div>
</div>

<div style="margin-bottom: 100px;"></div>

</div>
<script th:src="@{/front/lib/sliderPro/jquery.sliderPro.min.js}"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=AyI4O6S4sfPiP2gGaoGBAQq6Uy25Xt8Y"></script>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['element', 'jquery'], function () {
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        let $ = layui.jquery;

        let contextPath = /*[[@{/}]]*/'';
        // 房屋轮播图片
        $('#slider-pro').sliderPro({
            width: 737, //宽度
            height: 420, //高度
            fade: true, //是否使用淡入淡出效果
            arrows: true, //是否显示箭头导航按钮
            fadeArrows: false, //是否在鼠标滑过时淡入淡出显示箭头按钮
            buttons: false, //是否插件圆点导航按钮
            thumbnailArrows: true, //设置缩略图的箭头按钮是否可用
            fadeThumbnailArrows: false, //缩略图的箭头按钮是否淡入淡出
            autoplay: false, //设置幻灯片是否自动播放
            autoplayDelay:5000,//设置幻灯片自动播放的时间间隔，单位毫秒 默认值：5000
        });
        //百度地图
        let address = [[${one.address}]];
        let city = [[${one.city}]]
        let areaIndex = address.indexOf('区'); //得到某某区的下标
        let place = address.substring(areaIndex + 1)  //从区后面截取详细地点
        //alert(place);
        let map = new BMap.Map("allmap");
        // 创建地址解析器实例
        let myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(place, function (point) {
            if (point) {
                map.centerAndZoom(point, 18);
                let marker = new BMap.Marker(point); // 创建标注
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);  //跳动的点
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, city);

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });

        //点击发布
        $('#issue').click(() => {
            let doc = $('#doc-ta-1').val();   //获取评论输入框中的内容
            if (doc !== "" && $.trim(doc) !== "") {
                $('#doc-ta-1').val("")          //清除评论框中的内容
                let hid = [[${one.hid}]];
                let time = new Date().Format("yyyy-MM-dd HH:mm:ss");  //获取当前时间并且做日期格式转换
                //alert(time)
                //在发布输入框的前面添加评论
                $('#comment').before(
                    `<div class="am-g hp-comment-item">
                    <div class="am-u-sm-2">
                        <img width="80px" height="80px" src= "/cloud/front/img/person_head.jpg"
                             class="am-circle"/>
                        <span class="hp-comment-name">隐无为</span>
                    </div>
                    <div class="am-u-sm-10">
                        <div>
                            <span class="hp-comment-time">${time}</span><br/>
                            <span>${doc}</span>
                        </div>
                    </div>
                </div>`
                );
                //发起存储请求
                $.post({
                    url: `${contextPath}house/issue`,
                    data: JSON.stringify({'hid' :hid,'content': doc, 'createTime': time}),
                    success: function (msg) {
                        console.log(msg)
                    }
                    ,dateType: "json" //表示从后端接收的时json格式
                    ,contentType: "application/json;charset=utf-8"
                });
            }
        });
    });


    //日期格式转换
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


</script>

</body>

</html>